<template>
	<view class="container">
		<view class="flex j-center a-center step">
			<view class="flex a-center active">
				<view class="flex j-center a-center circle active">
					<view>1</view>
				</view>
				<view>填写任务需求</view>
			</view>
			<view class="split">
				<u-line length="36" :color="step === 1 ?'#999':'#246FDD'"></u-line>
			</view>
			<view class="flex a-center">
				<view class="flex j-center a-center circle" :class="{'active':step === 2}">
					<view>2</view>
				</view>
				<view :class="{'active':step === 2}">填写任务详情</view>
			</view>
		</view>
		<view class="step1" v-if="step === 1">
			<view class="block">
				<view class="title">*任务类型</view>
				<view class="flex types">
					<view class="flex j-center a-center item">
						<view>砍价任务</view>
					</view>
					<view class="flex j-center a-center item active">
						<view>现金任务</view>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="flex j-between a-center">
					<view class="title">*任务单数</view>
					<view class="number">
						<u-input placeholder="请输入任务单数"></u-input>
					</view>
				</view>
				<view class="split">
					<u-line length="654" color="#F2F2F2"></u-line>
				</view>
				<view class="flex j-between a-center">
					<view class="title">*任务奖励</view>
					<view class="number">
						<u-input placeholder="请输入任务奖励"></u-input>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="flex j-between a-center">
					<view class="title">*有效时间</view>
					<view class="time flex j-end">
						<u-input placeholder="请选择任务有效时间" disabled=""></u-input>
						<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
					</view>
				</view>
			</view>
			<view class="tips">这里是提示文本</view>
			<view class="next flex j-center a-center" @tap="step = 2">
				<view>下一步</view>
			</view>
		</view>
		<view class="step2" v-if="step === 2">
			<view class="block">
				<view class="title">*任务网址</view>
				<view style="margin-top: 24rpx;">
					<u-input placeholder="请输入任务网址（必填）"></u-input>
				</view>
			</view>
			<view class="block">
				<view class="title">*上传二维码</view>
				<view class="eg flex col j-center a-center upload">
					<u-icon name="plus-circle" size="63"></u-icon>
					<view>上传二维码</view>
				</view>
				<view class="tips">此二维码为链接二维码</view>
			</view>
			<view class="block">
				<view class="title">*上传验证图</view>
				<view class="eg flex col j-center a-center upload">
					<u-icon name="plus-circle" size="63"></u-icon>
					<view>上传验证图</view>
				</view>
				<view class="tips">此图片为任务完成验证需传截图</view>
			</view>
			<view style="height: 150rpx;width: 100%;"></view>
			<view class="fixed opt flex j-between a-center">
				<view class="flex j-center col">
					<view class="flex a-center">
						<view class="new">
							<image class="image" src="../static/icon/idx/idx(7).png"></image>
						</view>
						<view class="coin">1000</view>
					</view>
					<view style="margin-top: 12rpx;">手续费：0金币</view>
				</view>
				<view class="get flex j-center a-center">
					<view>确认发布</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			step:1,
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.step{margin: 32rpx  auto;color:#999;font-size: 28rpx;
	.split{margin: 0 32rpx;}
	.circle{width: 48rpx;height: 48rpx;border:1rpx solid #999;margin-right: 24rpx;border-radius: 100%;}
	.active{color:#246FDD;border-color: #246FDD;}
}
.block{background-color: #FFF;padding: 32rpx 24rpx;border-radius: 16rpx;margin-top: 24rpx;
	.title{font-weight: bold;font-size: 32rpx;color: #333;}
	.types{margin-top: 32rpx;
		.item{padding: 12rpx 40rpx;color: #333;font-size: 28rpx;background-color: #F2F2F2;margin-right: 48rpx;}
		.active{color: #246FDD;background-color: rgba(36, 111, 221, .1);}
	}
	.number{width: 224rpx;font-size: 32rpx;text-align: right;}
	.time{width: 288rpx;}
	.split{margin: 24rpx 0;}
}
.tips{color: #999;margin-top: 24rpx;}
.next{width: 702rpx;height: 88rpx;background: #246FDD;border-radius: 16rpx;font-size: 32rpx;color: #FFF;margin-top: 46rpx;}
.eg{width: 280rpx;height: 280rpx;border-radius: 16rpx;overflow: hidden;margin:32rpx 0;}
.upload{background-color: #F9F9F9;color: #999;font-size: 24rpx;}
.opt{height: 128rpx;background-color: #FFF;left: 0;right: 0;bottom: 0;font-size: 24rpx;color: #999999;padding: 0 24rpx;
	.new{width: 36rpx;height: 36rpx;margin-right: 24rpx;}
	.coin{font-size: 32rpx;color: #333;font-weight: bold;}
	.get{width: 320rpx;height: 88rpx;border-radius: 16rpx;background-color: #246FDD;color: #FFF;font-size: 32rpx;}
}
</style>
